import React, { useState } from 'react'
import "./coupon.scss"
import { Button, Modal } from 'antd'
import Record from './record'
import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'

export default function Coupon() {

  const [isModalOpen, setIsModalOpen] = useState(false);
  const navigate = useNavigate()
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const languages = useSelector((state) => state.publicReducer.language)
  return (
    <div className='coupon'>
      <div className='main'>
        <div className='nav'>{languages === "Korean" ? "쿠폰을 구매하세요" : (languages === "Chinese" ? "请购买优惠卷" : "Please purchase coupons")}</div>
        <section>
          <div className='card'>
            <hgroup>Lv.4. 999,999{languages === "Korean" ? "원" : (languages === "Chinese" ? "韩元" : "won")} {languages === "Korean" ? "제공" : (languages === "Chinese" ? "提供" : "offer")}</hgroup>
            <div>
              <dl>
                <dd>{languages === "Korean" ? "최대 거래금액" : (languages === "Chinese" ? "最大交易额" : "Max Trade Price")}</dd>
                <dt>999{languages === "Korean" ? "만원" : (languages === "Chinese" ? "韩元" : "won")}</dt>
              </dl>
              <dl>
                <dd>{languages === "Korean" ? "거래 코인" : (languages === "Chinese" ? "可交易币种" : "Tradable coin")}</dd>
                <dt>0{languages === "Korean" ? "개" : (languages === "Chinese" ? "数量" : "num")}</dt>
              </dl>
            </div>
            <figure><span>999{languages === "Korean" ? "만원" : (languages === "Chinese" ? "韩元" : "won")}</span></figure>
            <Button onClick={() => navigate("/pay")} type="primary">{languages === "Korean" ? "쿠폰 구매" : (languages === "Chinese" ? "购买" : "Buy")}</Button>
          </div>
          <div className='card'>
            <hgroup>Lv.4. 999,999{languages === "Korean" ? "원" : (languages === "Chinese" ? "韩元" : "won")} {languages === "Korean" ? "제공" : (languages === "Chinese" ? "提供" : "offer")}</hgroup>
            <div>
              <dl>
                <dd>{languages === "Korean" ? "최대 거래금액" : (languages === "Chinese" ? "最大交易额" : "Max Trade Price")}</dd>
                <dt>999{languages === "Korean" ? "만원" : (languages === "Chinese" ? "韩元" : "won")}</dt>
              </dl>
              <dl>
                <dd>{languages === "Korean" ? "거래 코인" : (languages === "Chinese" ? "可交易币种" : "Tradable coin")}</dd>
                <dt>0{languages === "Korean" ? "개" : (languages === "Chinese" ? "数量" : "num")}</dt>
              </dl>
            </div>
            <figure><span>999{languages === "Korean" ? "만원" : (languages === "Chinese" ? "韩元" : "won")}</span></figure>
            <Button onClick={() => navigate("/pay")} type="primary">{languages === "Korean" ? "쿠폰 구매" : (languages === "Chinese" ? "购买" : "Buy")}</Button>
          </div>
          <div className='card'>
            <hgroup>Lv.4. 999,999{languages === "Korean" ? "원" : (languages === "Chinese" ? "韩元" : "won")} {languages === "Korean" ? "제공" : (languages === "Chinese" ? "提供" : "offer")}</hgroup>
            <div>
              <dl>
                <dd>{languages === "Korean" ? "최대 거래금액" : (languages === "Chinese" ? "最大交易额" : "Max Trade Price")}</dd>
                <dt>999{languages === "Korean" ? "만원" : (languages === "Chinese" ? "韩元" : "won")}</dt>
              </dl>
              <dl>
                <dd>{languages === "Korean" ? "거래 코인" : (languages === "Chinese" ? "可交易币种" : "Tradable coin")}</dd>
                <dt>0{languages === "Korean" ? "개" : (languages === "Chinese" ? "数量" : "num")}</dt>
              </dl>
            </div>
            <figure><span>999{languages === "Korean" ? "만원" : (languages === "Chinese" ? "韩元" : "won")}</span></figure>
            <Button onClick={() => navigate("/pay")} type="primary">{languages === "Korean" ? "쿠폰 구매" : (languages === "Chinese" ? "购买" : "Buy")}</Button>
          </div>
          <div className='card'>
            <hgroup>Lv.4. 999,999{languages === "Korean" ? "원" : (languages === "Chinese" ? "韩元" : "won")} {languages === "Korean" ? "제공" : (languages === "Chinese" ? "提供" : "offer")}</hgroup>
            <div>
              <dl>
                <dd>{languages === "Korean" ? "최대 거래금액" : (languages === "Chinese" ? "最大交易额" : "Max Trade Price")}</dd>
                <dt>999{languages === "Korean" ? "만원" : (languages === "Chinese" ? "韩元" : "won")}</dt>
              </dl>
              <dl>
                <dd>{languages === "Korean" ? "거래 코인" : (languages === "Chinese" ? "可交易币种" : "Tradable coin")}</dd>
                <dt>0{languages === "Korean" ? "개" : (languages === "Chinese" ? "数量" : "num")}</dt>
              </dl>
            </div>
            <figure><span>999{languages === "Korean" ? "만원" : (languages === "Chinese" ? "韩元" : "won")}</span></figure>
            <Button onClick={() => navigate("/pay")} type="primary">{languages === "Korean" ? "쿠폰 구매" : (languages === "Chinese" ? "购买" : "Buy")}</Button>
          </div>


        </section>
        <aside><Button onClick={showModal}>{languages === "Korean" ? "구매 내역 보기" : (languages === "Chinese" ? "查看购买记录" : "Buy history")}</Button></aside>
        <div className='footer'>
          <h1>{languages === "Korean" ? "주의사항" : (languages === "Chinese" ? "注意事项" : "Precautions")}</h1>
          <ul>
            <li>{languages === "Korean" ? " · 쿠폰은 코인카우에서 발생되는 수수료를 차감하는데 사용됩니다." : (languages === "Chinese" ? " · 优惠券用于抵扣人工智能交易产生的交易费用。" : " · Coupons are used to deduct fees generated by AI trades.")}</li>
            <li>{languages === "Korean" ? " · 쿠폰 구매 시 즉시 적용되므로, 거래금액 및 사용기한을 반드시 확인하시기 바랍니다." : (languages === "Chinese" ? " · 优惠券在购买后立即使用，因此请务必确认所要购买优惠券的金额和有效期。" : " · Coupons are applied immediately upon purchase, so be sure to check the balance and expiration date.")}</li>
            <li>{languages === "Korean" ? " · 쿠폰 구매는 신용카드나 기타 결제 수단으로 가능합니다." : (languages === "Chinese" ? " · 可以使用信用卡或其他付款方式购买优惠券。" : " · Coupon purchases can be made with a credit card or other payment method.")}</li>
            <li>{languages === "Korean" ? " · 발급된 쿠폰은 발급일로부터 60일 동안 유효합니다.(60일 경과 시 자동만료)" : (languages === "Chinese" ? " · 售出的优惠券自发放之日起60天内有效（60天后自动失效）" : " · The sold coupon is valid for 60 days from the date of issuance (automatically expires after 60 days)")}</li>
            <li>{languages === "Korean" ? " · 구매하신 쿠폰은 환불이 불가하오니 구매 시 신중하게 판단하시고 구매하시기 바랍니다." : (languages === "Chinese" ? " · 已购买的优惠券不可退款，购买前请谨慎判断。" : " · Purchased coupons are non-refundable, so please think carefully before purchasing.")}</li>
            <li>{languages === "Korean" ? " · 쿠폰의 기간이 만료되거나, 쿠폰 잔액이 모두 소진되었을 경우 레벨이 1로 강등되며 거래가 중지되니 유의하시기 바랍니다." : (languages === "Chinese" ? " · 请注意：当优惠券到期或优惠券余额用完时，等级降为 1并停止交易。" : " · Please note that when the coupon period expires or the coupon balance is exhausted, the level is demoted to 1 and the transaction is stopped.")}</li>
          </ul>
        </div>
      </div>

      <Modal className='modal_purchase' title={languages === "Korean" ? "쿠폰 구매 내역" : (languages === "Chinese" ? "优惠卷购买记录" : "Coupon buy history")} open={isModalOpen} onCancel={handleCancel} width={800} footer={null} centered>
        <Record></Record>
        <Button onClick={handleCancel}>{languages === "Korean" ? "확인" : (languages === "Chinese" ? "确认" : "OK")}</Button>
      </Modal>
    </div>
  )
}

